<template>
  <ul class="deadLine">
    <li v-for="(item, index) in deadLine" :key="index">
      <div class="div1">
        <img :src="item.imgs" alt="" />
      </div>
      <div class="div2">
        <div class="p1">
          <span class="spam1">{{ item.title }}</span>
          &nbsp;
          <span class="spam2">{{ item.paratext }}</span>
        </div>
        <div class="p2">
          <p>
            <span class="span1">新增</span
            >
            &nbsp;
            <span class="span2">{{ item.new }}</span>
          </p>
          <p>
            <span class="span3">未恢复</span
            > &nbsp;<span class="span4">{{ item.unrecovered }}</span>
          </p>
        </div>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  props: ["deadLine"],
};
</script>

<style lang="scss" scoped]>
.deadLine {
  background: url("../../assets/image/hellowword/BackgroundFive.png");
  background-size: 100%;
  width: 1462px;
  height: 170px;
  // border: 1px dashed #ccc;
  display: flex;
  justify-content: space-around;

  align-items: center;
  li {
    display: flex;

    width: 324px;
    position: relative;
    .div1 {
      width: 102px;
      height: 110px;
  
      //   z-index: 9999;

      img {
        width: 102px;
      }
    }
    .div2 {
      
      .p1 {
        margin: 8px 0 0 12px;
        .spam1 {
          width: 253px;
          height: 22px;
          font-family: Source Han Sans CN;
          font-weight: 700;
          color: white;
          font-size: 22px;
          line-height: 22px;
        }
        .spam2 {
          color: white;
        }
      }
      .p2 {
        width: 238px;
        height: 52px;
        // border: 1px dashed #ccc;
        background: url("../../assets/image/hellowword/PedestalOne.png");
        background-size: 100%;
        position: absolute;
        bottom: 4px;
        left: 86px;
        display: flex;
        justify-content: space-around;
    
        .span1 {
         width: 39px;
height: 18px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #b4d0e8;
font-size: 18px;
line-height: 18px;
        }
        .span2 {
          width: 44px;
          height: 35px;
          background-image: -webkit-linear-gradient(top,#00fcfa 0%,#1b7ce9 100%);
          	-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
          font-family: D-DIN Exp;
          font-weight: 700;
          color: #1b7ce9;
          font-size: 32px;
          line-height: 35px;
        }
        .span3 {
   width: 39px;
height: 18px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #b4d0e8;
font-size: 18px;
line-height: 18px;
        }
        .span4 {
          width: 44px;
          height: 35px;
          background-image: -webkit-linear-gradient(top,#fbe576 0%,#f69741 100%);
          	-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
          font-family: D-DIN Exp;
          font-weight: 700;
          color: #f69741;
          font-size: 32px;
          line-height: 35px;
        }
      }
    }
  }
}
</style>
